<template>
  <div class="wxchat">
    <div class="banner">
      <asn-banner :bannerList="bannerList" />
    </div>
    <div class="content">
      <div
        class="wow animate__animated animate__fadeIn slider_nav"
        data-wow-delay="0.5s"
      >
        <div class="title">
          {{ title }}
        </div>
        <ul>
          <router-link to="/ranking"><li>排行榜</li></router-link>
          <router-link to="/sightbead"><li>准星设置</li></router-link>
          <router-link to="/BrilliantMoment"><li>精彩瞬间</li></router-link>
          <router-link to="/support"><li>外设推荐</li></router-link>
        </ul>
      </div>
      <new-list :newList="wxList" class="wow animate__animated animate__slideInRight " data-wow-delay="0.5s"/>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page_index"
      :page-sizes="[5, 10, 20, 100]"
      :page-size="page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="el_pagination_list"
    >
    </el-pagination>
    <asn-go-top />
  </div>
</template>

<script>
import { getAsyncList } from "@/api/wechat";
import { openLoading, closeLoading } from "@/public/js/loading";
import NewList from "./components/NewList.vue";
export default {
  components: { NewList },
  created() {
    this.getAsyncList();
  },
  data() {
    return {
      wxList: [],
      total: 0,
      page_index: 1,
      page_size: 5,
      title: "公众号",
      bannerList: [
        {
          id: 1,
          img: require("@/public/img/banner01.jpg"),
        },
        {
          id: 2,
          img: require("@/public/img/banner02.jpg"),
        },
        {
          id: 3,
          img: require("@/public/img/banner03.jpg"),
        },
      ],
    };
  },
  methods: {
    async getAsyncList() {
      openLoading();
      try {
        const params = {
          offset: 0,
          count: 20,
          no_content: 0,
        };
        const { data } = await getAsyncList(params);
        closeLoading();
        localStorage.setItem("wxList", JSON.stringify(data));
        this.initWxlist();
      } catch (err) {
        this.$message.error("页面错误,请联系管理员");
        console.log(err);
        closeLoading();
      }
    },

    gotoDetail(url) {
      window.open(url);
    },

    handleSizeChange(val) {
      this.page_size = val;
      this.wxList = [];
      this.wxList = JSON.parse(localStorage.getItem("wxList")).slice(
        (this.page_index - 1) * this.page_size,
        this.page_size
      );
    },
    handleCurrentChange(val) {
      this.page_index = val;
      this.wxList = [];
      console.log((this.page_index - 1) * this.page_size);

      this.wxList = JSON.parse(localStorage.getItem("wxList")).slice(
        (this.page_index - 1) * this.page_size,
        this.page_size * this.page_index
      );
    },

    initWxlist() {
      this.wxList = JSON.parse(localStorage.getItem("wxList")).slice(
        this.page_index - 1,
        this.page_size
      );
      this.total = JSON.parse(localStorage.getItem("wxList")).length;
    },
  },
};
</script>
<style lang="less" scoped>
.el_pagination_list{
  margin-bottom: 10px;
}

.content {
  display: flex;
  justify-content: center;
  .slider_nav {
    z-index: 100;
    position: relative;
    margin-top: -60px;
    width: 200px;
    a {
      text-decoration: none;
      color: #000;
    }
    .title {
      background-color: #28cefe;
      height: 60px;
      font-size: 20px;
      line-height: 60px;
      color: #fff;
      font-weight: 600;
    }
    ul {
      li {
        list-style: none;
        height: 50px;
        border: 1px solid #ddd;
        border-bottom: 0;
        line-height: 50px;
        text-align: left;
        padding-left: 20px;
        cursor: pointer;
      }
      li:hover {
        font-weight: 600;
      }
      li:last-child {
        border-bottom: 1px solid #ddd;
      }
    }
  }
}

.wxchat {
  padding: 10px; // 添加默认padding

  .banner {
    width: 100%;
    height: 400px;
    margin-top: 40px;
  }
}

@media (min-width: 576px) {
  .wxchat {
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .wxchat {
    padding: 30px;
  }
}

@media (min-width: 992px) {
  .wxchat {
    padding: 40px;
  }
}

@media (min-width: 1200px) {
  .wxchat {
    padding: 0;
  }
}

// 添加更多媒体查询以覆盖更多屏幕尺寸
@media (max-width: 575px) {
  .wxchat {
    padding: 5px;
  }
}

@media (max-width: 767px) {
  .carousel-img {
    max-height: 300px; // 限制最大高度
  }
}
</style>